<template>
	<view v-if="getRequestOK">
		<!-- 顶部导航 -->
		<uni-nav-bar backState="2000" fontColor="#FFF" :titleCenter="false" type="transparent">
			<view slot="left">
				<image class="hicon" src="/static/home.png" mode="aspectFit" @tap="goHome" />
			</view>
		</uni-nav-bar>
		<uni-nav-bar v-if="navBarShow" backState="1000" :titleCenter="false">{{ newInfo.cutTitle }}</uni-nav-bar>
		<!-- 顶部毛玻璃背景图 -->
		<!-- 可选值(模糊度) xs s m l xl -->
		<helang-blur :params="{
					width: '750rpx',
					height: '520rpx',
					image: newInfo.cover,
					blur:'xs'
				}"></helang-blur>

		<view class="model">
			<!-- 标题 -->
			<view class="mtitle">{{newInfo.title}}</view>
			<view class="info-user">
				<view class="info">
					<text>{{ newInfo.author }} {{ newInfo.views_count }}阅读</text>
				</view>
			</view>
		</view>

		<!-- 资讯详情 -->
		<view class="info-content">
			<html-parse :content="newInfo.content" />
		</view>

		<!-- 作者信息 -->
		<view class="info-header">
			<text class="send">00000发布 </text>
			<text>000阅读</text>
		</view>

		<view class="line" />
		<comment :oneInfo="newInfo" type="info"></comment>
	</view>
</template>

<script>
	// // 引入 时间日期格式化显示函数
	// import timeFrom from '@/tools/timeFrom.js'
	// 引入富文本解析组件
	import htmlParse from "@/components/html-parse/parse.vue";
	// 引入毛玻璃组件
	import helangBlur from "@/components/helang-blur/helang-blur.vue"
	// 引入评论组件
	import comment from "@/components/comment.vue"

	export default {
		components: {
			htmlParse,
			helangBlur,
			comment
		},
		data() {
			return {
				// 是否显示 navbar
				navBarShow: false,
				// 数据请求状态
				getRequestOK: false,
				// 当前动态详情
				newInfo: {},
			};
		},
		onPageScroll(event) {
			if(event.scrollTop > 100){
				this.navBarShow = true
			}else{
				this.navBarShow = false
			}
		},
		async onLoad(option) {
			// let res = await this.$u.api.getNewInfo(option)
			// console.log('请求的数据：',res);
			uni.request({
				url: `http://ts.lagou.uieee.com/api/v2/news/${option.id}`,
				success: (res) => {
					// console.log('请求的数据：', res);
					//  @![7.jpg](16)  `<img src=${this.BaseFileURL}+$1 />`
					let cp = res.data.content.replace(/@!\[.*\]\((\d+)\)/g,
						`<img src=${this.BaseFileURL}$1 />`)
					// let cp = res.data.content.replace(/@!\[.*\]\((\d+)\)/g, "<img src='" + this.BaseFileURL + '$1' + "'/>")
					cp = cp.replace(/\s\D\s/g, '<p></p>')
					this.newInfo = {
						...res,
						cutTitle: res.data.title.length > 11 ? res.data.title.substring(0, 11) +
							'...' : res.data.title,
						cover: this.BaseFileURL + res.data.image.id,
						userId: res.data.user_id,
						content: cp,
						views_count: res.data.hits
					}
					this.getRequestOK = true
					// console.log('当前动态详情',this.newInfo);
					// console.log('cp：', cp);
					// console.log('this', this.BaseFileURL);
				}
			});
		},
		methods:{
			goHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	/* 引入富文本解析器 */
	@import '@/components/html-parse/parse.css';

	.hicon {
		height: 36upx;
		width: 36upx;
		padding-left: 30upx;
		padding-top: 10upx;
	}

	.model {
		width: 750upx;
		height: 520upx;
		position: absolute;
		background-color: rgba($color: #364161, $alpha: 0.2);
		z-index: 1;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-end;

		.mtitle {
			margin-top: 20upx;
			width: 700upx;
			margin-left: 25upx;
			font-size: 44upx;
			color: #fff;
			line-height: 64upx;
		}


		.info-user {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			margin-top: 30upx;
			margin-left: 5upx;
			margin-bottom: 30upx;

			.info {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: flex-end;
				align-items: left;
				margin-left: 20upx;
				font-size: 24upx;
				font-weight: bolder;
				color: #fff;
			}
		}
	}


	.info-content {
		width: 680upx;
		text-align: left;
		margin-top: 40upx;
		// #ifdef MP-WEIXIN
		margin-left: 35upx;
		// #endif
		// #ifndef MP-WEIXIN
		margin-left: 0;
		// #endif
	}

	.info-header {
		margin-top: 10upx;
		margin-left: 25upx;
		padding-bottom: 20upx;
		color: #999;
		font-size: 22upx;

		.send {
			margin-right: 20upx;
		}
	}

	.line {
		height: 30upx;
		width: 750upx;
		background-color: #f3f3f3;
	}
</style>
